<template>
  <div class="recommend-wrapper home-section">
    <div class="recommend-content">
      <div class="section-title">
        <h1 class="title-main">热门推荐</h1>
        <p class="title-tips">行业热门商品一键直达</p>
      </div>
      <div class="section">
        <div v-for="(item, index) in serviceModelList" :key="index" class="service-model">
          <div class="service-model-type" @click="goRoute(item.path)">
            <p class="type-title">{{ item.type }}</p>
            <p>查看更多</p>
          </div>
          <img class="service-model-img" :src="require('../../../assets/home/'+item.url+'.png')">
          <div class="service-model-cont">
            <div class="cont-big-category">
              <div class="flex-row">
                <span class="word">食品通用设备</span>
                <img
                  class="pic4"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc4d473bed6d3f20654ba73ae7a7f80f4a00df005a28fe3a3b1b62b04ed62d3d7"
                />
              </div>
              <div class="flex-row">
                <span class="word">食品加工设备</span>
                <img
                  class="img4"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfa61d9a8e0e1a6d84381ba35fe8069798dcf9fb4411dec9f4b35783e0e19dc53"
                />
              </div>
              <div class="flex-row">
                <span class="word">商用厨房设备</span>
                <img
                  class="img5"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng763424a453988a6db7a16113c98db2309cd32b0fc29d3d83e28e1127636fa856"
                />
              </div>
            </div>
            <div class="line"></div>
            <div class="cont-small-category">
              <span v-for="(small, i) in item.smallCategory" :key="i">{{small}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serviceModelList: [
        {
          type: '食品机械',
          path: '/mall/food',
          url: 'spjx',
          bigCategory: [],
          smallCategory: ['面食机械', '烘焙设备', '制冷设备', '豆制品设备', '工程炉灶', '广式炉灶', '通用包装设备', '真空包装机']
        },
        {
          type: '原材料采购',
          path: '/mall/materials',
          url: 'spjx',
          bigCategory: [],
          smallCategory: ['辣椒', '花椒', '香辛料', '食品添加剂', '肉制品', '米面主材', '油脂油料', '糖类']
        },
        {
          type: '食品安全',
          path: '/mall/security',
          url: 'spaq',
          bigCategory: [],
          smallCategory: ['有害成分检测', '添加剂检测', '微生物检测', '生物毒素检测', '功能成分分析', '感官鉴评', '品质指标分析', '食品认证服务']
        },
        {
          type: '仓储物流',
          path: '/mall/logistics',
          url: 'ccwl',
          bigCategory: [],
          smallCategory: ['冷链仓储服务', '常温仓储服务', '物流运输服务', '仓储租赁托管', '物流配送托管']
        }
      ]
    }
  },
  methods: {
    goRoute(path) {
      this.$router.push({ path: path });
    }
  }
}
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.recommend-wrapper {
  background-color: #F5F5F5;
}
.recommend-content {
  width: $bigWidth;
  margin: 0 auto;;
}
.section {
  display: flex;
  flex-wrap: wrap;
}
.service-model {
  width: 590px;
  height: 238px;
  background-color: #fff;
  margin-right: 20px;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  .service-model-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 70px;
    padding: 15px;
    background-color: #000;
    border-bottom-right-radius: 60px;
    opacity: 0.75;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    .type-title {
      font-size: 16px;
      line-height: 24px;
    }
  }
  .service-model-img {
    width: 200px;
    height: 100%;
  }
  .service-model-cont {
    padding: 15px 20px;
    .cont-big-category {
      display: flex;
      .flex-row {
        width: 33%;
        text-align: center;
        .word {
          display: inline-block;
          font-size: 14px;
          margin: 20px 0;
        }
      }
    }
    .line {
      border-top: 1px solid #EEEEEE;
      margin: 15px 0;
    }
    .cont-small-category {
      span {
        font-size: 12px;
        color: #666666;
        line-height: 20px;
        margin-right: 20px;
      }
    }
  }
}
.service-model:nth-child(2n) {
  margin-right: 0;
}
</style>
